<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.5.1.js"></script>
    <script src="/js/vue3.2.37.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/layer.js"></script>
</head>
<body>

<div id="app" style="text-align: center">
    <h3>当前网址：http://127.0.0.1:9090</h3>

    <button id="logout" @click="logout">退出登录</button>

    <p>
        用户名：<span id="userName">{{userName}}</span>
    </p>

    <p>
        用户描述：<span id="userNameDesc">{{userNameDesc}}</span>
    </p>


    <table border="1" style="text-align: center;margin-top: 50px">
        <tr>
            <th colspan="9">第三方客户端信息</th>
        </tr>
        <tr>
            <th>ID（主键ID）</th>
            <th>client_name（客户端名字）</th>
            <th>client_desc（客户端描述信息）</th>
            <th>client_id（客户端标识（由授权系统进行分配定义））</th>
            <th>client_secret（客户端密钥（由授权系统进行分配定义））</th>
            <th>client_home_page_url（客户端主页）</th>
            <th>client_callback_url（客户端回调URL）</th>
            <th>user_name（由谁创建的该条记录）</th>
            <th>操作</th>
        </tr>
        <tr v-for="thirdSystemInfo in thirdSystemInfos">
            <td>{{thirdSystemInfo.id}}</td>
            <td>{{thirdSystemInfo.clientName}}</td>
            <td>{{thirdSystemInfo.clientDesc}}</td>
            <td>{{thirdSystemInfo.clientId}}</td>
            <td>{{thirdSystemInfo.clientSecret}}</td>
            <td>{{thirdSystemInfo.clientHomePageUrl}}</td>
            <td>{{thirdSystemInfo.clientCallbackUrl}}</td>
            <td>{{thirdSystemInfo.userName}}</td>
            <td>
                <button style="color: red" @click="deleteThirdSystemInfoHandle(thirdSystemInfo.id)">删除</button>
                <button style="color: green" @click="updateThirdSystemInfoHandle(thirdSystemInfo)">更新</button>
            </td>
        </tr>

    </table>


    <div style="border: 1px solid blue;margin-top: 50px">
        <p style="font-weight: bolder">
            <span>{{addFlag?'创建':'更新'}}第三方客户端信息</span>
            <button v-if="!addFlag" @click="switchCreateMode" style="float: right">切回创建模式</button>
        </p>

        <div style="text-align: center">
            <p><span>第三方客户端主键ID：</span><input name="clientName" disabled
                                                      v-model="addOrUpdateThirdSystemInfo.id"></p>
            <p><span>第三方客户端名字：</span><input name="clientName" v-model="addOrUpdateThirdSystemInfo.clientName">
            </p>
            <p><span>客户端描述信息：</span><input name="clientDesc" v-model="addOrUpdateThirdSystemInfo.clientDesc"></p>
            <p><span>第三方客户端标识：</span><input name="clientId" v-model="addOrUpdateThirdSystemInfo.clientId"></p>
            <p><span>第三方客户端密钥：</span><input name="clientSecret"
                                                    v-model="addOrUpdateThirdSystemInfo.clientSecret"></p>
            <p><span>第三方客户端主页：</span><input name="clientHomePageUrl"
                                                    v-model="addOrUpdateThirdSystemInfo.clientHomePageUrl"></p>
            <p><span>第三方客户端回调URL：</span><input name="clientCallbackUrl"
                                                       v-model="addOrUpdateThirdSystemInfo.clientCallbackUrl"></p>
            <button @click="addOrUpdateThirdSystemInfoHandle">{{addFlag?'创建':'更新'}}</button>

        </div>

    </div>


</div>
</body>

<script>
    function getCookie(cookie_name) {
        var allcookies = document.cookie;
        //索引长度，开始索引的位置
        var cookie_pos = allcookies.indexOf(cookie_name);


        // 如果找到了索引，就代表cookie存在,否则不存在
        if (cookie_pos != -1) {
            // 把cookie_pos放在值的开始，只要给值加1即可
            //计算取cookie值得开始索引，加的1为“=”
            cookie_pos = cookie_pos + cookie_name.length + 1;
            //计算取cookie值得结束索引
            var cookie_end = allcookies.indexOf(";", cookie_pos);


            if (cookie_end == -1) {
                cookie_end = allcookies.length;


            }
            //得到想要的cookie的值
            var value = unescape(allcookies.substring(cookie_pos, cookie_end));
        }
        return value;
    }

</script>
<script>


    const {createApp} = Vue
    const request = axios.create({})
    createApp({
        data() {
            return {
                userName: getCookie("userName"),
                userNameDesc: getCookie("userNameDesc"),
                thirdSystemInfos: [],
                addOrUpdateThirdSystemInfo: {},
                addFlag: true
            }
        },
        methods: {
            logout: function () {
                request.get('/user/logout')
                    .catch(function (error) {
                        window.location.reload();
                    });
            },
            addOrUpdateThirdSystemInfoHandle: function () {

                layer.confirm('确定' + (this.addFlag ? '创建' : '更新') + '？', {
                    btn: ['确定', '取消'] //按钮
                }, () => {
                    if (this.addFlag) {
                        request.post('/oauth/third-system-infos/add', this.addOrUpdateThirdSystemInfo).then(function () {
                            window.location.reload();
                        });
                    } else {
                        request.post('/oauth/third-system-infos/update', this.addOrUpdateThirdSystemInfo).then(function () {
                            window.location.reload();
                        });
                    }
                });


            },
            deleteThirdSystemInfoHandle: function (id) {


                layer.confirm('确定删除？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    request.get('/oauth/third-system-infos/delete/' + id)
                        .finally(function (error) {
                            window.location.reload();
                        });
                });


            },
            updateThirdSystemInfoHandle: function (currentThirdSystemInfo) {
                this.addOrUpdateThirdSystemInfo = JSON.parse(JSON.stringify(currentThirdSystemInfo));
                this.addFlag = false;


            },
            switchCreateMode: function () {
                this.addFlag = true;
                this.addOrUpdateThirdSystemInfo = {}
            }
        },
        mounted: async function () {
            let {data: responseData} = await request.get('/oauth/third-system-infos')
            if (responseData) {
                this.thirdSystemInfos = responseData;
            }
        }
    }).mount('#app')
</script>

</html>